<template>
  <div class="introduce">
<!--    <div class="tabBar" >-->
<!--      <div-->
<!--       @click="tabBarActive(index)"-->
<!--      :class="{activeTab:tabBarIndex==index}"-->
<!--        v-for="(item,index) of tabBarItem" :key="index"-->
<!--        >{{item}}</div>-->
<!--    </div>-->
<!--    <div class="indtroduce_conetnt" v-if="tabBarIndex==0">-->
<!--      &lt;!&ndash; <div>海内外品暂不支持7天无理由退换，介意请慎拍，谢谢！</div> &ndash;&gt;-->
<!--      <img :src="value" alt="" v-for="(value,index) in goodsDetail.detailed_description" @click="previewImage(value, goodsDetail.detailed_description)" :key="index" mode="widthFix">-->
<!--    </div>-->

    <!-- 评论区 -->
    <div class="comment_content" >
      <div class="comment_btn">
          <div @click="rate_all(true)" :class="['comment_btn_all',{comment_btn_active:rateFlag}]">所有评价</div>
          <div  @click="rate_all(false)" :class="['comment_btn_pic',{comment_btn_active:!rateFlag}]">有图评价</div>
      </div>
      <div class="comment_item" v-for="(value,index) in commentList" :key="index">
          <div class="comment_item_top">
            <div class="comment_item_nick">{{value.user_info.nickname}}</div>
            <div class="comment_item_time">{{value.created_at}}</div>
          </div>
          <div class="comment_item_content">{{value.content}}</div>
          <div class="comment_item_pic">
            <img :src="value1" mode="aspectFill" v-for="(value1,index1) in value.comment_img" @click="previewImage(value1,value.comment_img)" :key="index1">
          </div>
          <!-- <div class="comment_item_goods">120片</div> -->
        </div>
    </div>
    <!-- 评论区结束 -->

    <!-- <div class="service"></div> -->
  </div>
</template>

<script>


export default {
  name:'goodsDetailIntroduce',
  data() {
    return {
      // tabBarItem:['详情','评价','售后'],
      // tabBarIndex:0,
      rateFlag:true,
      commentList:[],
      page:0,
      id:"",   //商品id
      goodsDetail:"",  //商品的详细详细
    }
  },
  methods: {
    previewImage(value,value1){
      this.$currency.previewImage(value,value1)
    },
    tabBarActive(index){
      this.tabBarIndex=index
    },
    rate_all(value){
      this.rateFlag=value;
      let is_img=value==true?'':1
      this.page=0
      this.commentList=[]
      this.getComment(is_img)
    },
    async getComment(is_img=''){
      let res=await this.$request.getData('/goods/getUserComment',{goods_id:this.id,limit:10,page:this.page,is_img:is_img})
      this.commentList=this.commentList.concat(res.data.data)
    },
    async getGoodsDetails(){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getGoodsDetails',{goods_id:this.id})
      if(res.data.level=='success'){
        this.goodsDetail=res.data.data
      }
      wx.hideLoading()
    },
  },
  onReachBottom(){
    this.page++;
    this.getComment()
  },
  onLoad(options){
    let is_img = '';
    if (options.tag){
      this.rateFlag = true;
    }else {
      this.rateFlag = false;
      is_img = 1;
    }
    this.id=options.id;
    this.getComment(is_img)
    this.getGoodsDetails()
  },
  onShow(){
    
  }
}
</script>

<style scoped>
  .introdece{
    width:100%;
    height: 100%;
    background: #eee;
  }
  .tabBar{
    width:100%;
    
    display: flex;
    background: #fff;
  }
  .tabBar>div{
    padding:5px;
    flex:1;
    color:gray;
    text-align: center;
  }
  .activeTab{
    color:red !important;
    border-bottom: red 1px solid;
  }
  .indtroduce_conetnt>div:nth-child(1){
    color:red;
    margin-top:10px;
    margin-bottom: 30px;
  }
  .indtroduce_conetnt>img{
    width:100%;
    display: block;
  }

  /* 评论区 */
   .comment_btn{
    padding-top:10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #eee
  }
  .comment_btn_active{
    background: red !important;
  }
  .comment_btn_all,.comment_btn_pic{
    width:40%;
    height:30px;
    line-height: 30px;
    padding:2.5px 5px;
    text-align: center;
    border-radius: 5px;
    background: gray;
    color:#fff;
  }
  .comment{
    width:100%;
    background:#fff;
  }
  .comment_item{
    padding:5px 10px;
    border-bottom: 1px solid #eee;
    color:rgb(63, 60, 60);
    font-size:14px;
  }
  .comment_item_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .comment_item_nick{
    color:cornflowerblue;
  }
  .comment_item_goods{
    margin:10px 0;
  }
  .comment_item_pic{
    display:flex;
  }
  .comment_item_pic>img{
    width:80px;
    height: 80px;
  }
</style>
